<template>
    <div class="app-container">
        <el-form :model="searchdata" size="small" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="员工id" prop="userid">
                <el-input v-model="searchdata.userid" placeholder="请输入员工id" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="员工姓名" prop="username">
                <el-input v-model="searchdata.username" placeholder="请输入员工姓名" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="客资ID" prop="kzid">
                <el-input v-model="searchdata.kzid" placeholder="请输入客资ID" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="客资姓名" prop="kzname">
                <el-input v-model="searchdata.kzname" placeholder="请输入客资姓名" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="收益类型" prop="shouyitype">
                <el-select v-model="searchdata.shouyitype" placeholder="收益类型" clearable style="width: 150px">
                    <el-option v-for="dict in moneytype" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="审核状态" prop="shenhetype">
                <el-select v-model="searchdata.shenhetype" placeholder="审核状态" clearable style="width: 150px">
                    <el-option v-for="dict in type" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="审核人" prop="shenheusername">
                <el-input v-model="searchdata.shenheusername" placeholder="请输入审核人" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="收益时间">
                <el-date-picker @change="selectTime" v-model="value1" type="daterange" range-separator="至"
                    start-placeholder="开始日期" value-format="timestamp" end-placeholder="结束日期"
                    :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="审核时间">
                <el-date-picker @change="selectTimes" v-model="value2" type="daterange" range-separator="至"
                    start-placeholder="开始日期" value-format="timestamp" end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索
                </el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="tixianList">
            <el-table-column label="员工ID" align="center" prop="userid" />
            <el-table-column label="员工姓名" align="center" prop="username" />
            <el-table-column label="客资ID" align="center" prop="kzid" />
            <el-table-column label="客资姓名" align="center" prop="kzname" />
            <el-table-column label="收益类型" align="center" prop="shouyitypename">
                <template slot-scope="scope">
                    <span v-if="scope.row.shouyitype == 0">返利</span>
                    <span v-else-if="scope.row.shouyitype == 1">提成</span>
                    <span v-else-if="scope.row.shouyitype == 2">提成(首推)</span>
                    <span v-else-if="scope.row.shouyitype == 3">提成(次推)</span>
                </template>
            </el-table-column>
            <el-table-column label="收益时间" align="center" prop="newshouyitime">
                <!-- <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.wtdTime, '{YY}-{MM}-{DD} {hh}:{mm}:{ss}') }}</span>
                </template> -->
            </el-table-column>
            <el-table-column label="收益金额" align="center" prop="money" />
            <!-- 0--审核通过  1---待审核 2---已驳回 -->
            <el-table-column label="审核状态" align="center" prop="shenhetype">
                <template slot-scope="scope">
                    <span v-if="scope.row.shenhetype == 3">(人工)审核不通过</span>
                    <span v-else-if="scope.row.shenhetype == 1">待审核</span>
                    <span v-else-if="scope.row.shenhetype == 2">审核通过</span>
                    <span v-else-if="scope.row.shenhetype == 4">取消订单,自动取消</span>
                </template>
            </el-table-column>
            <el-table-column label="审核人" align="center" prop="shenheusername" />
            <el-table-column label="审核时间" align="center" prop="newshenhetime">
                <!-- <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.wtdTime, '{YY}-{MM}-{DD} {hh}:{mm}:{ss}') }}</span>
                </template> -->
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="shenhe(scope.row)"
                        v-if="scope.row.shenhetype == 1">审核</el-button>
                    <!-- <el-button size="mini" type="text" icon="el-icon-edit" v-if="scope.row.type == 3"
                        @click="chakan(scope.row)">作废原因</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="searchdata.pageNum" :limit.sync="searchdata.pageSize"
            @pagination="getList" />
        <!-- 审核详情 -->
        <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @close="closeDialog">
            <el-form :model="form" ref="form" :rules="rules" style="height: 90px;" size="small" :inline="true"
                label-width="150px">
                <el-form-item label="退回审核" style="width:500px">
                    <template>
                        <el-radio-group v-model="form.typeid">
                            <el-radio :label="1">同意</el-radio>
                            <el-radio :label="2">驳回</el-radio>
                        </el-radio-group>
                    </template>
                </el-form-item>
                <el-form-item label="驳回原因" prop="remark" v-if="form.typeid == '2'">
                    <el-input v-model="form.remark" placeholder="请输入驳回原因" type="textarea" clearable style="width: 180px">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" size="mini" :disabled="lock" @click="submitshenhe">提交审核</el-button>
            </div>
        </el-dialog>
        <!-- 查看详情 -->
        <!-- <el-dialog :title="title1" :visible.sync="open1" width="800px" append-to-body @close="closeDialog">
            <el-form :model="form" ref="form" :rules="rules" size="small" :inline="true" label-width="150px"
                :disabled="edit">
                <el-form-item label="驳回原因" prop="wtdFailCause">
                    <el-input v-model="form.wtdFailCause" placeholder="请输入驳回原因" type="textarea" clearable
                        style="width: 180px">
                    </el-input>
                </el-form-item>
            </el-form>
        </el-dialog> -->
    </div>
</template>
<script>
import { shenhe, shenheorder } from "@/api/puser/chengjiaoshenhe.js";
export default {
    name:'Chengjiaoshenhe',
    data() {
        return {
            lock: false,
            disabled: false,
            showSearch: true,
            value1: '',  //收益时间
            value2: '',  //审核时间
            searchdata: {
                userid: '',
                username: '',
                kzid: '',
                kzname: '',
                shouyitype: '',
                shouyistartTime: '',
                shouyiendTime: '',
                shenheuserid: '',
                shenhetype: '',
                shenhestartTime: '',
                shenheendTime: '',
                pageNum: 1,
                pageSize: 10,
            },
            // 收益类型
            moneytype: [{
                value: '0',
                label: '返利'
            }, {
                value: '1',
                label: '提成'
            }, {
                value: '2',
                label: '提成(首推)'
            }, {
                value: '3',
                label: '提成(次推)'
            }],
            // 审核状态
            type: [{
                value: '3',
                label: '(人工)审核不通过'
            }, {
                value: '1',
                label: '待审核'
            }, {
                value: '2',
                label: '审核通过'
            }, {
                value: '4',
                label: '取消订单,自动取消'
            }],
            edit: true,
            tixianList: [],
            loading: false,
            open: false,
            open1: false,
            title: '',
            title1: '',
            total: 0,

            date: {
                wtdUserId: '',
                wtdTime: '',
                takeMoney: '',
                wtdCardId: '',
            },
            form: {
                id: '',
                typeid: 1,
                remark: ''
            },
            rules: {
                remark: [{ required: true, message: "驳回原因不能为空", trigger: "blur" }]
            },
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            }
        }
    },
    created() {
        this.getList();
    },
    methods: {
        // 收益时间
        selectTime(e) {
            if (e) {
                e[1] = e[1] + 24 * 60 * 60 * 1000 - 1
                this.searchdata.shouyistarttime = e[0]
                this.searchdata.shouyiendtime = e[1]
            } else {
                this.searchdata.shouyistarttime = '';
                this.searchdata.shouyiendtime = ''
            }

        },
        selectTimes(e) {
            if (e) {
                e[1] = e[1] + 24 * 60 * 60 * 1000 - 1
                this.searchdata.shenhestarttime = e[0]
                this.searchdata.shenheendtime = e[1]
            } else {
                this.searchdata.shenhestarttime = '';
                this.searchdata.shenheendtime = ''
            }

        },
        closeDialog() {
            this.form = {
                id: '',
                typeid: 1,
                remark: ''
            }
        },
        async getList() {
            let res = await shenhe(this.searchdata);
            if (res.code == 200) {
                this.tixianList = res.rows;
                this.total = res.total;
            }
        },
        // 审核
        shenhe(row) {
            this.open = true;
            this.title = "审核";
            this.form.wtdUserId = row.wtdUserId;
            this.form.takeMoney = row.takeMoney;
            this.form.wtdName = row.wtdName;
            this.form.wtdCardId = row.wtdCardId;
            this.form.wtdAddress = row.wtdAddress;
            this.form.wtdAddressMessage = row.wtdAddressMessage;
            this.form.id = row.id;
            this.disabled = false;
        },
        submitshenhe() {
            this.lock = true;
            this.$refs['form'].validate(valid => {
                if (valid) {
                    shenheorder(this.form).then(response => {
                        if (response.code == 200) {
                            this.lock=false;
                            this.$modal.msgSuccess("审核成功");
                            this.getList();
                            this.open = false;
                            this.closeDialog();
                        }else{
                            this.lock=false;
                            this.$modal.msgError("审核失败");
                        }

                    })
                }
            })
        },
        // 查看
        chakan(row) {
            this.date.wtdUserId = row.wtdUserId;
            this.date.wtdTime = row.wtdTime;
            this.date.takeMoney = row.takeMoney;
            this.date.wtdCardId = row.wtdCardId;
            this.open1 = true;
            this.title1 = "查看驳回原因";
            selectshenhechakanOne(this.date).then(response => {
                if (response.data.code == 200) {
                    if (response.data.msg == '暂无数据') {
                        this.form.wtdFailCause = "暂无"
                    } else {
                        this.form.wtdFailCause = response.data.data.wtdFailCause;
                    }
                }
            })
        },
        // 搜索
        handleQuery() {
            shenhe(this.searchdata).then(response => {
                if (response.code == 200) {
                    this.tixianList = response.rows;
                    this.total = response.total;
                }
            })
        },
        resetQuery() {
            this.searchdata = {
                userid: '',
                username: '',
                kzid: '',
                kzname: '',
                shouyitype: '',
                shouyistartTime: '',
                shouyiendTime: '',
                shenheuserid: '',
                shenhetype: '',
                shenhestartTime: '',
                shenheendTime: '',
                pageNum: 1,
                pageSize: 10,
            },
                this.value1 = "";
            this.value2 = "";
            this.getList();
        },
        // 验证搜索框日期
        beginDate() {
            const self = this;
            return {
                disabledDate(time) {
                    //           debugger;
                    if (self.endTime) {
                        //如果结束时间不为空，则小于结束时间
                        return new Date(self.endTime).getTime() < time.getTime();
                    } else {
                        return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                    }
                },
            };
        },
        processDate() {
            const self = this;
            return {
                disabledDate(time) {
                    if (self.startTime) {
                        //如果开始时间不为空，则结束时间大于开始时间
                        return new Date(self.startTime).getTime() > time.getTime();
                    } else {
                        return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                    }
                },
            };
        },
    }
}
</script>